<template>
  <div class="nav-card">
    <div class="nav" v-for="item in navList" :key="item.text" :class="{
            'nav-active': item.text === $route.meta.breadCrumb.at(-1).name
        }" @click="handleClick(item.path)">
      <span class="item-name">{{ item.text }}</span>
      <span class="item-num">{{ item.num }}</span>
    </div>
  </div>
</template>
<script>
  import {
    getRuleGroupList,
    getTotleList
  } from "@/api/his/warnRule";
  import {
    getSecondMenu
  } from "@/api/his/getMenu";
  export default {
    name: 'NavCard',
    data() {
      return {
        navList: {
          text: null,
          num: null,
          path: null,

        },
        totleList: [],
        activeIndex: 0 // 默认选中第一个菜单项
      }
    },
    created() {
      if (this.$route.query.menuId && this.$route.query.menuId !== undefined) {
        localStorage.setItem("menuId", this.$route.query.menuId)
      }
      this.getListMenu();
    },
    methods: {
      getTotle() {
        getTotleList().then(response => {
          const data = response.data; // 获取数据数组
          for (let navItem of this.navList) {
            for (let item of data) {
              if (navItem.text.includes("校验")) {
                navItem.num = item.jyan;
              }
              if (navItem.text.includes("执业")) {
                navItem.num = item.zhiye;
              }
              if (navItem.text.includes("无抗菌")) {
                navItem.num = item.wkju;
              }
              if (navItem.text.includes("儿科")) {
                navItem.num = item.erk;
              }
            }
          }
        });
      },
      handleClick(path) {
        if (this.$route.path === path) return
        this.$router.push(path)
      },
      getListMenu() {
        const parentId = localStorage.getItem("menuId");
        getSecondMenu(parentId).then(response => {
          this.navList = response.map(item => ({
            text: item.menuName.replace(/系统/g, ''),
            path: this.addLeadingSlash(item.path),
            num: null,
            menuId: item.menuId
          }));
          this.getTotle();
        });
      },
      addLeadingSlash(path) {
        // 确保路径以斜杠开头
        return path.startsWith('/') ? path : `/${path}`;
      },
    }
  }
</script>
<style scoped lang="scss">
  .nav-card {
    display: flex;
    padding: 0 14px 10px;
    background-color: #fff;
    flex-wrap: wrap;

    .nav {
      display: flex;
      margin-top: 10px;
      padding: 20px 44px 18px 44px;
      height: 54px;
      background-color: #EBEFF8;
      border-radius: 5px;
      margin-right: 8px;
      cursor: pointer;
      user-select: none;

      .item-name {
        font-size: 16px;
        color: #2B2B2B;
        font-weight: 500;
        white-space: nowrap;
        line-height: 16px;
      }

      .item-num {
        margin-top: -5px;
        padding: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #0052d9;
        width: 30px;
        height: 30px;
        font-size: 10px;
        color: #fff;
        font-weight: bold;
        margin-left: 10px;
      }

      .nav--active {
        background-color: #4373F1;

        .item-name {
          color: #fff;
        }
      }
    }

    .nav-active {
      background-color: #4373F1;

      .item-name {
        color: #FFFFFF;
      }
    }
  }
</style>
